<template>
  <div class="user">
    <el-popover
    placement="right"
    trigger="hover">
      <ul class="setting">
          <!-- <li><i class="el-icon-user"></i>个人信息</li>
          <li><i class="el-icon-lock"></i>修改密码</li> -->
          <li @click="handleCommand('logout')" ><i class="el-icon-switch-button"></i>退出登录</li>
      </ul>
      <div slot="reference">
        <div class="user-info">
          <i class="el-icon-user-solid"></i>
          个人中心
          <i class="el-icon-more icon-arrow"></i>
        </div>
      </div>
    </el-popover>
    <!-- <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        <i class="el-icon-user-solid" :size="18"></i>个人中心
      </span>
      
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="user">个人信息</el-dropdown-item>
        <el-dropdown-item command="pwd">修改密码</el-dropdown-item>
        <el-dropdown-item command="logout" @click="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown> -->
  </div>
</template>

<script>
  export default {
    name: "UserInfo",
    methods: {

      handleCommand(command) {
        // //查看用户信息
        // if(command === 'user'){
        //   this.$router.push('/userinfo')
        // }
        // //修改密码
        // if (command === 'pwd') {
        //   this.$router.push('/changepwd')
        // }
        //退出用户登录
        if (command === 'logout') {
          window.sessionStorage.clear()
          this.$router.push('/login')
        }
      }
    }
  }
</script>

<style scoped>
li{
  list-style: none;
}
ul{
  padding:0;
  margin:0
}
.user{
  line-height: 32px;
  padding-left: 40px;
  padding-top:10px;
  padding-bottom:10px;
  border-right: 1px solid #DFE2EA;
  border-bottom: 1px solid #DFE2EA;
  color:#303133;
  background-color: rgba(255,255,255,.2);
}
.user:hover{
  background-color: #e8ebf0;
}
.user-info{
  cursor: pointer;
  color: #303133;
  position: relative;
}
.user-info i{
  color: #909399;
}
.icon-arrow{
  position: absolute;
  right:10px;
  top:8px;
}
.setting li{
  line-height: 36px;
  cursor: pointer;
  padding:2px 10px;
}
.setting li:hover,.setting li:active{
  background-color: #ecf5ff;
  color: #66b1ff;
  border-radius:4px;
}

.setting li i{
  padding-right:10px;
  font-size:18px;
}
</style>
